﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../fly-comment.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>
    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/grid.css" rel="stylesheet" type="text/css" />

    <script>
//        var d = new Date(),i=0
//        while (i++ < 100000) {
//            var o=eval("i+5")
//        }
//        alert(new Date()-d)

        $(function () {
        
            var rows = []
            while (rows.length < 200) {
                rows.push({ id: rows.length, f1: "abcdefghijk", f2: Math.random(), f3: Math.random(), f4: Math.random() + " - " + Math.random(), f5: Math.random(), f6: Math.random(), f7: Math.random() })
            }

            rows[0].children = [rows.pop(), rows.pop(), rows.pop(), rows.pop(), rows.pop()]

            rows[3].children = [rows.pop(), rows.pop()]

            rows[3].children[1].children = [rows.pop(), rows.pop()]

            var store = new $.data.Store(
            {
                proxy: new $.data.MemoryProxy(
            	{
            	    data: {
            	        Total: 200,
            	        Rows: rows
            	        //            	        Rows: [{ id: 123456789, f1: "abcdefghijk" }
            	        //                        , { id: 12, f1: "abc" }
            	        //                        , { id: 2, f1: "b"}]
            	    }
            	}),
                reader: new $.data.JsonReader(
            	{
            	    root: 'Rows',
            	    totalProperty: 'Total',
            	    id: 'id'
            	}, [{
            	    name: "name",
            	    mapping: "f1",
            	    type: "string",
            	    format: "{0}123"
            	}, "f2", "f3", "f4", "f5", "f6", "f7"]),
                remoteSort: true,
                baseParams:
            	{
            	    classname: 'ClassInfoAjax',
            	    methodname: 'GetList',
            	    start: 0,
            	    limit: 5
            	}
            });

            var rs = store.load()

            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                altRowBy:3,
//                altRowBy: function (row, i) {
//                    return i%5
//                },
                //rowHeight: 50,
                width: 800,
                height: 400,
                plugins: new $.ui.grid.TreeGridPlugin({
                    parentCascade: true,
                    childCascade: true
                }),
                columns: [
                new $.ui.grid.RowNumberer({
                    format: "{0}.",
                    width: 150
                }),
                new $.ui.grid.CheckboxSelectionModel(),
                {
                    dataIndex: "id",
                    width: 40
                },
                {
                    dataIndex: "name"
                    //,width: 800
                }, "f2", "f3", "f4"
                //, "f5", "f6", "f7"
                ]
            })
            var d = new Date()
            
            panel.render(document.body)
            //alert(new Date()-d)
            //var grid = new $.ui.Grid();
            //            var aa = [{ a: 1, b: 5 }, { a: 2,c:10}]
            //            var temp = new $.ui.Template("{a}-{b}", "{c}").format(aa[0], aa[1])
            //            var html=temp.apply()


            //            var aa = [{ a: 1, b: 5 }, { a: 2}]
            //            var format = "{0}-{1}"
            //            var reg = /\d+/g
            //            function r($1)
            //            {
            //                var _ = $1
            //                return 0
            //            }

            //            function f() {
            //                var js = "",js2="", i = 0;
            //                while(i<aa.length)
            //                {
            //                    js+="with(aa["+i+"]){"
            //                    js2 += "}"
            //                    i++
            //                }
            //                js+="format.replace(reg,r)"+js2
            //                eval(js)
            //            }

            //            f(0)

            //            with (store) {
            //                load()
            //            }

            //            var rs = store.load()

            //            var panel = new $.ui.Grid({
            //                id: 'panel',
            //                text: 'Panel demo',
            //                columns: [{

            //            }]
            //        })
            //panel.render();

            $.doc.onClick(function () {
                // debugger
                // panel.sort("id", "DESC");
                //                var table = $("table:first")
                //                var rows = table[0].rows;
                //                Array.prototype.sort.call(rows,function(a,b) {
                //                    return a.rowIndex-b.rowIndex
                //                })
            });
        })
    </script>
    <style>
            /*.table div
            {
            	width:100%;
            	overflow:hidden;
            	text-overflow:ellipsis;
            	white-space:nowrap;
            }*/
            
            body
            {
            	background-image:url(../../plugins/themes/images/bgs.png);
            	background-repeat:repeat-x;
            	background-position:center bottom;
            	height:1000px;
            	color:#222222;
            	font-size:12px;
            	font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
            }
   
    </style>
</head>
<body>
    

</body>
</html>
